<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="data in testData">
          <a href="" @click.prevent="toDetail(data.testCode)" style="text-decoration: none;">
            <div class="grid-content bg-purple" id="_div2">
              <img :src="data.testPictureUrl"
                   style="width: 300px;height: 180px">
              <span class="caption text-left">
                <el-popover
                    placement="top-start"
                    title="名字详情"
                    width="259"
                    trigger="hover"
                    transition="fade-in-linear"
                    :content="data.testName">
                    <el-button type="text" slot="reference" v-text="data.testName"
                               style="white-space:nowrap;text-overflow:ellipsis; overflow:hidden;width: 300px;min-height: 0px;display:inline-block;color: #000000;text-align: left">
                      testName
                    </el-button>
                  </el-popover>
                <span>
                  <el-button type="text" v-text="data.testType" style="">testType</el-button>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button type="text" icon="el-icon-view" style=" position:relative;left: 50px">{{
                      data.visitors
                    }}
                  </el-button>
                </span>
              </span>
            </div>
          </a>
          <br>
        </el-col>
      </el-row>
    </div>
    <!--    分页-->
    <div id="_page">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: "ShowTestList",

  data() {
    return {
      isCollapse: true,
      activeIndex: '1',
      activeIndex2: '1',
      currentPage: 1,
      pageSize: 16,
      total: 0,
      testData: {
        testCode: 0,
        testName: '',
        testPictureUrl: '',
        visitors: 0,
        testType: ''
      },
    };
  },

  methods: {
    publicCollectAndTest() {
      let token = sessionStorage.getItem("token");
      let config = {
        token: token,
        collectType: this.collectType,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      this.$axios.get("/collectAndTest/getCollectOrTestByUserCode", {params: config})
          .then(response => {
            let responseData = response.data

            let pageData = responseData.data;
            this.currentPage = pageData.currentPage;
            this.pageSize = pageData.size;
            this.total = pageData.total;
            this.testData = pageData.pageVo;
          })
    },
    myCollect() {
      this.testData = [];
      this.collectType = 1;
      this.publicCollectAndTest();
    },
    myTest() {
      this.testData = [];
      this.collectType = 2;
      this.publicCollectAndTest();
    },
    myFootprint() {
      this.testData = [];
      let token = sessionStorage.getItem("token");
      let config = {
        token: token,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      this.$axios.get("/footprint/getFootprints", {params: config})
          .then(response => {
            let responseData = response.data;
            let pageData = responseData.data;
            this.currentPage = pageData.currentPage;
            this.pageSize = pageData.size;
            this.total = pageData.total;
            this.testData = pageData.pageVo;
          })
    },
    handleCurrentChange(page) {
      this.condition.currentPage = page;
      if (this.collectType === 1) {
        this.myCollect();
      } else if (this.collectType === 2) {
        this.myTest();
      } else {
        this.myFootprint();
      }
    },
    toDetail(testCode) {
      sessionStorage.setItem("testId", testCode);
      this.$router.push("/testDetail")
    }

  },
  created() {
    this.myCollect();
  }
}
</script>

<style scoped>
#_page {
  position: relative;
  left: 640px;
}

#_div2 {
  width: 300px;
  height: 270px;
}

</style>